<template>
  <div class="cart">
    <index-header :nowIndex="0"></index-header>
    <order-header title="我的购物车">
    </order-header>
    <div class="wrapper">
      <div class="container">
        <div class="cart-box">
          <ul class="cart-item-head">
            <li class="col-1"><span class="checkbox" :class="{'checked':this.allChecked}"></span>全选
            </li>
            <li class="col-3">商品名称</li>
            <li class="col-1">单价</li>
            <li class="col-2">数量</li>
            <li class="col-1">小计</li>
            <li class="col-1">操作</li>
          </ul>
          <ul class="cart-item-list">
            <li class="cart-item" v-for="(item,index) in list" :key="index">
              <div class="item-check">
                <span class="checkbox"></span>
              </div>
              <div class="item-name">
                <span>{{item.name}}</span>
              </div>
              <div class="item-price">{{item.price}}</div>
              <div class="item-num">
                <div class="num-box">
                  <button type="button" class="header-btn" @click="red(index)">-</button>
                  <span>{{item.count}}</span>
                  <button type="button" class="header-btn" @click="add(index)">+</button>
                </div>
              </div>
              <div class="item-total">{{item.price}}</div>
              <div class="item-del" @click="del(index)">删除</div>
            </li>
          </ul>
        </div>
        <div class="order-wrap clearfix">
          <div class="cart-tip fl">
            <a href="/#/index">继续购物</a>
             共<span>{{list.length}}</span>件商品，已选择<span>{{this.checkedNum}}</span>件
          </div>
          <div class="total fr">
            合计：<span>{{totalPrice}}</span>元
            <a href="javascript:;" class="btn">去结算</a>
          </div>
        </div>
      </div>
    </div>
    <common-footer></common-footer>
  </div>
</template>
<script>
  import IndexHeader from './IndexHeader'
  import OrderHeader from './OrderHeader';
  import CommonFooter from './CommonFooter.vue'
  export default {
    name: 'cart',
    components: {
      OrderHeader,
      IndexHeader,
      CommonFooter
    },
    data() {
      return {
        list: [{
            "name": "经济学的思维方式",
            "price": "2699",
            "count": 0,
            "author": "托马斯·索维尔",
            "desc": "美国亚马逊长居榜首的经济学通识读物，美国公民学习经济学的入门佳作。",
            "img": "http://bookbk.img.ireader.com/group6/M00/0C/AC/CmQUNlvEMYaEZKURAAAAAFy7Q8s512789975.jpg",
            "wordNum": "38.7万",
            "eyes": "445",
            "house": "四川人民出版社",
            "con": "经济学一点也不复杂，也不难理解，困扰我们的是故作艰深的语言和拒人千里之外的形式。本书没有让人望而生畏公式图表，也没有难懂的术语，更没有枯燥的实证。托马斯·索维尔用最贴近日常生活的语言和案例，为我们讲解经济学博士都不一定能完全掌握的经济学思维方式，让所有人都能体验毫无障碍的阅读，并且在无形中学会经济学这一门专业知识体系和分析工具，让普通人不再受含糊的政治辞令和晦涩的经济学术语的迷惑，掌握经济社会的运转规律。通过本书，我们将会了解价格、投资和国际贸易等方方面面的知识，也会对媒体、政治家、公知的言论保持警醒和怀疑，不再不加批判地用“穷人”和“富人”来区分不同的人群。我们还会对房租管制、贸易平衡、贫富差距、统计数据产生全新的认识。 "
          },
          {
            "name": "有我陪着你，什么都不怕",
            "price": "1299",
            "count": 0,
            "author": "夏正正",
            "desc": "美国亚马逊长居榜首的经济学通识读物，美国公民学习经济学的入门佳作。",
            "img": "http://bookbk.img.ireader.com/group6/M00/5F/18/CmQUNlZhYBCEaplvAAAAAKJTMhs363021351.jpg",
            "wordNum": "2.7万",
            "eyes": "3611",
            "house": "中国友谊出版公司",
            "con": "治愈所有人的温暖故事。脱线，发神经、思维过于跳跃的意思。顾名思义，脱线森林就是一个动物们都比较不正常的地方。在这里，松鼠一灰的文字和画笔充满想象力；刺猬团团有些刁蛮，但是会把拥抱留给认定的朋友；长颈鹿目里开了家蛋糕店，热衷于用蛋糕传递快乐；鸵鸟爱莎走不出失恋的阴影，但是常常爱讲冷笑话；小老虎喵喵不像个森林之王，而是个有趣的花店店长……我们生活里经历的他们也在经历，但是他们把一切变得更加有趣。我想，你会喜欢上这片弥漫脱线气息的森林。我想，你会时不时被某个动物戳中心事。我想，你会在脱线森林，遇见好久不见的自己。我等过许许多多事物，但数你最奇怪。我在还不知道这个世上有你时，就已经开始等你了。所以我永远没法子怪你。因为不是你迟到，而是我早到了。有我陪着你，就什么都不怕。脱线森林，属于你的心灵港湾。 "
          },
          {
            "name": "玉炉胭脂香",
            "price": "300",
            "count": 0,
            "author": "徐洛一",
            "desc": "美国亚马逊长居榜首的经济学通识读物，美国公民学习经济学的入门佳作。",
            "img": "http://book.img.ireader.com/group6/M00/3B/04/CmRablvG-bKELb8VAAAAADPgCrs370951940.jpg",
            "wordNum": "15.1万",
            "eyes": "9176",
            "house": "中国友谊出版公司",
            "con": "她是前朝皇后，后宫中虚以委蛇，所谓血浓于水，却不过悲欢一念。直到，一个人的出现，赠她胭脂香，与君生死注。新皇登基那日，城门之上，他亲口所言，无织弋，无南堇。后来，她成为宠冠后宫的织弋夫人，翻手成云覆手为雨，年岁不详，来历不查。命运一次次重复，当前朝皇后的身份被公之于众，她又该何去何从？…… "
          },
          {
            "name": "权力巅峰的女人",
            "price": "99",
            "count": 0,
            "author": "蒋胜男",
            "desc": "热播史诗巨作“芈月传”编剧、原著小说作者蒋胜男倾力之作！",
            "img": "http://book.img.ireader.com/group6/M00/5E/E9/CmQUNlZhOnKEZ4GoAAAAANliNGw781169997.jpg",
            "wordNum": "12.8万",
            "eyes": "5816",
            "house": "九州出版社",
            "con": "热播史诗巨作“芈月传”编剧、原著小说作者蒋胜男倾力之作！本书讲述秦宣太后、吕后、萧太后、武则天、孝庄、慈禧等12位执政太后风云诡谲、爱恨缠绵的一生，及其对中国历史的深远影响。全新的解读、情理兼具的剖析，用政治的智慧和人性的本能诠释女政治家的成长历程。"
          },
          {
            "name": "金庸作品集",
            "price": "36900",
            "count": 0,
            "author": "金庸",
            "desc": "美国亚马逊长居榜首的经济学通识读物，美国公民学习经济学的入门佳作。",
            "img": "http://book.img.ireader.com/group6/M00/2C/A0/CmRae1uE7LyESI0gAAAAAKL40E0172594450.jpg",
            "wordNum": "883.8万",
            "eyes": "3573",
            "house": "广州出版社",
            "con": "金庸先生历时六年，终于完成了全部作品的第三次修订工作。金庸先生对全部作品的语言文字一一进行了订正，特别对一些早期作品的故事情节和人物形象塑造进行了较大的改动，使情节更具吸引力、人物更鲜活。作品集包括全十五部，三十六册：《书剑恩仇录》《碧血剑》《射雕英雄传》《雪山飞狐》《神雕侠侣》《飞狐外传》《白马啸西风》《倚天屠龙记》《鸳鸯刀》《连城诀》《天龙八部》《侠客行》《笑傲江湖》《鹿鼎记》《越女剑》。 "
          },
          {
            "name": "大秦帝国（套装版）",
            "price": "5",
            "count": 0,
            "author": "孙皓晖",
            "desc": "美国亚马逊长居榜首的经济学通识读物，美国公民学习经济学的入门佳作。",
            "img": "http://book.img.ireader.com/group6/M00/42/98/CmRaIVjdD-eERmKLAAAAABtu_rA893342291.jpg",
            "wordNum": "405.5万",
            "eyes": "91831",
            "house": "中信出版社",
            "con": "《大秦帝国》：包括了大秦帝国第一部《黑色裂变》+第二部《国命纵横》+第三部《金戈铁马》+第四部《阳谋春秋》+第五部《铁血文明》+第六部《帝国烽烟》。 第一部《黑色裂变》内容简介： 秦孝公;商鞅变法图强。秦国由弱变强，收复失地，开始崛起。在群雄逐鹿，山河日变的“大争之世”，在英雄辈出，百家争鸣的战国时代，华夏大地的西陲正经历着一场亘古未有的“黑色裂变”。公元前362年，秦献公在大战中身中毒箭而亡。嫡子嬴渠梁灵前即位，史称秦孝公。秦国时遭列强蔑视，国力虚弱。又逢山东六国会盟，图谋分秦。二十二岁的年轻君主秦孝公血书国耻碑，向天下广发求贤令，誓以变法强国。在与入秦士子的反复切磋度量之中，商鞅脱颖而出。渭水船头，商鞅一展为政主张，以法家思想折服了秦孝公。秦孝公拜商鞅为相，开始了君臣二十年的大变法。法家大师商鞅全面主持变法，带领秦国一步一步地创建了战时法治文明。秦国新军练成，国富民强，百姓勇于公战，平民争立军功。常年为国事操劳，秦孝公和商鞅虽不足五十岁，都已是心力交瘁。秦孝公召回了流放二十年的太子嬴驷，撒手而亡。嬴驷即位，史称秦惠王。六国趁机向秦国施加压力，要求秦国杀商鞅以谢天下。商鞅为避免秦国陷入内乱，将政权兵权交出，坦然入狱，被老世族车裂身亡。嬴驷借势扫清所有反对变法的旧贵族，将商鞅之法立为万世国法，并着力谋划如何使已经强大的秦国突破六国围堵，实现强国崛起。 大秦帝国第二部《国命纵横》内容简介： 六国合纵抗"
          },
          {
            "name": "活着",
            "price": "999",
            "count": 0,
            "author": "余华",
            "desc": "20世纪中国文学当之无愧的经典之作，已被译介至30多个国家和地区，获得国内外多个文学大奖，如意大利格林扎纳·卡佛文学奖（1998年）、台湾《中国时报》10本好书奖（1994年）、香港“博益”15本好书奖（1994年）、第三届世界华文“冰心文学奖”（2002年），入选香港《亚洲周刊》评选的“20世纪中文小说百年百强”、中国百位批评家和文学编辑评选的“20世纪90年代最有影响的10部作品”。",
            "img": "http://book.img.ireader.com/group6/M00/2B/41/CmQUOFcMj9CEBj_gAAAAAI1eU64427806210.jpg",
            "wordNum": "9.6万",
            "eyes": "19w+",
            "house": "作家出版社",
            "con": "20世纪中国文学当之无愧的经典之作，已被译介至30多个国家和地区，获得国内外多个文学大奖，如意大利格林扎纳·卡佛文学奖（1998年）、台湾《中国时报》10本好书奖（1994年）、香港“博益”15本好书奖（1994年）、第三届世界华文“冰心文学奖”（2002年），入选香港《亚洲周刊》评选的“20世纪中文小说百年百强”、中国百位批评家和文学编辑评选的“20世纪90年代最有影响的10部作品”。余华的每一部长篇小说，都震撼着一批又一批的读者。他的长篇小说是中国当代文学中的经典之作。《活着》是一部充满血泪的小说。余华通过一位中国农民的苦难生活讲述了人如何去承受巨大的苦难；讲述了眼泪的丰富和宽广；讲述了绝望的不存在：讲述了人是为了活着本身而活着……《活着》讲述了农村人福贵悲惨的人生遭遇。福贵本是个阔少爷，可他嗜赌如命，终于赌光了家业，一贫如洗。他的父亲被他活活气死，母亲则在穷困中患了重病，福贵前去求药，却在途中被国民党抓去当壮丁。经过几番波折回到家里，才知道母亲早已去世，妻子家珍含辛茹苦地养大两个儿女。此后更加悲惨的命运一次又一次降临到福贵身上，他的妻子、儿女和孙子相继死去，最后只剩福贵和一头老牛相依为命，但老人依旧活着，仿佛比往日更加洒脱与坚强。 "
          },
          {
            "name": "原来你还在这里",
            "price": "500",
            "count": 0,
            "author": "辛夷坞",
            "desc": "美国亚马逊长居榜首的经济学通识读物，美国公民学习经济学的入门佳作。",
            "img": "http://book.img.ireader.com/group6/M00/14/CC/CmQUNlX04n2EdvoXAAAAALNbpDw088932066.jpg",
            "wordNum": "21.2万",
            "eyes": "18w+",
            "house": "朝华出版社",
            "con": "你心中是否也有这样一个人？他离开后，生活还在继续，他留下的痕迹被平淡的日子逐渐抹去。你很少想起他，没有他也能过得很好。然而在那些个猝不及防的梦里，他又出现在你的身边，第一次说出分别后的悔意，你面带胜利者的笑容转身，醒来后却只想痛哭一场。每个女人，一生中都在等待一场倾城之恋。但不是每个灰姑娘，都在等待一双水晶鞋。我们在太年轻的时候遇见，除了爱，一无所知。假如有一天重逢，我希望你过的不幸福。 "
          },
          {
            "name": "天龙八部（全五册）",
            "price": "6000",
            "count": 0,
            "author": "金庸",
            "desc": "本书以北宋、辽、西夏、大理并立的历史为宏大背景，将儒释道、琴棋书画等中国传统文化融会贯通其中，书中人物繁多，个性鲜明，情节离奇，尽显芸芸众生百态。",
            "img": "http://bookbk.img.ireader.com/group6/M00/2C/61/CmRae1uDmamEXYvUAAAAAE714-w157543504.jpg",
            "wordNum": "125万",
            "eyes": "3132",
            "house": "广州出版社",
            "con": "本书以北宋、辽、西夏、大理并立的历史为宏大背景，将儒释道、琴棋书画等中国传统文化融会贯通其中，书中人物繁多，个性鲜明，情节离奇，尽显芸芸众生百态。《天龙八部》内容：丐帮帮主乔峰与大理国王子段誉、少林弟子虚竹结为兄弟。他身为大宋武林一大帮帮主，发现自己竟是契丹人，虽受尽中原武林人士唾弃而不肯以怨报怨；他身为辽国南院大王，却甘愿背上叛族罪名，最终以悲壮的自杀来阻止辽国发兵攻宋，不愧为顶天立地的大英雄。 "
          },
          {
            "name": "五大贼王",
            "price": "5",
            "count": 0,
            "author": "张海帆",
            "desc": " 从秦始皇传至今日的五行至尊圣王鼎到底是否真正存在？两千年封建皇族隐藏最深的秘密一一揭开。",
            "img": "http://bookbk.img.ireader.com/group6/M00/41/4B/CmRaIVjdBd2EAAciAAAAALclv-Y644565529.jpg",
            "wordNum": "181.8万",
            "eyes": "200.4w",
            "house": "网络小说",
            "con": "民国时期，天下动荡，军阀割据。奉天小贼火小邪无意中被卷入盗取“御风神捕”保管的女身玉密谋之中，经历兄弟惨死、亡命逃亡，一路凶险，天赋异禀的他能否化险为夷？传说中的五行世家逐渐浮出水面……令人眼花缭乱的离奇盗术，不可思议的防盗术，匪夷所思的古老盗器……一一登场。 从秦始皇传至今日的五行至尊圣王鼎到底是否真正存在？两千年封建皇族隐藏最深的秘密一一揭开。  "
          }
        ],
        allChecked: false, //是否全选
        cartTotalPrice: 0, //商品总金额
        checkedNum: 0 //选中商品数量
      }
    },
    mounted() {

    },
    methods: {
        del(index){
                this.list.splice(index,1)
            },
            red(index){
              if(this.list[index].count>0)
              {
                this.list[index].count--;
                this.checkedNum--;
              }
                t
            },
            add(index){
                this.list[index].count++;
                this.checkedNum++;
            }
    },
    computed: {
      totalPrice() {
        var total = 0
        for (var i = 0; i < this.list.length; i++) {
          total += this.list[i].count * this.list[i].price
        }
        return total
      }
    }
  }
</script>
<style lang="scss">
  .cart {
    .wrapper {
      background-color: #F5F5F5;
      padding-top: 30px;
      padding-bottom: 114px;

      .cart-box {
        background-color: #fff;
        font-size: 14px;
        color: #999999;
        text-align: center;

        .checkbox {
          display: inline-block;
          width: 22px;
          height: 22px;
          border: 1px solid #E5E5E5;
          vertical-align: middle;
          margin-right: 17px;
          cursor: pointer;

          &.checked {
            background: url('/imgs/icon-gou.png') #FF6600 no-repeat center;
            background-size: 16px 12px;
            border: none;
          }
        }

        .cart-item-head {
          display: flex;
          height: 79px;
          line-height: 79px;

          .col-1 {
            flex: 1;
          }

          .col-2 {
            flex: 2;
          }

          .col-3 {
            flex: 3;
          }
        }

        .cart-item-list {
          .cart-item {
            display: flex;
            align-items: center;
            height: 125px;
            border-top: 1px solid #E5E5E5;
            font-size: 16px;

            .item-check {
              flex: 1;
            }

            .item-name {
              flex: 3;
              font-size: 18px;
              color: #333333;
              display: flex;
              align-items: center;

              img {
                width: 80px;
                height: 80px;
                vertical-align: middle;
              }

              span {
                margin-left: 30px;
              }
            }

            .item-price {
              flex: 1;
              color: #333333;
            }

            .item-num {
              flex: 2;

              .num-box {
                display: inline-block;
                width: 150px;
                height: 40px;
                line-height: 40px;
                border: 1px solid #E5E5E5;
                font-size: 14px;

                a {
                  display: inline-block;
                  width: 50px;
                  color: #333333;
                }

                span {
                  display: inline-block;
                  width: 50px;
                  color: #333333;
                }
              }
            }

            .item-total {
              flex: 1;
              color: #FF6600;
            }

            .item-del {
              flex: 1;
              width: 14px;
              height: 12px;
              background: url('/imgs/icon-close.png') no-repeat center;
              background-size: contain;
              cursor: pointer;
            }
          }
        }
      }

      .order-wrap {
        font-size: 14px;
        color: #666666;
        margin-top: 20px;
        height: 50px;
        line-height: 50px;

        .cart-tip {
          margin-left: 29px;

          a {
            color: #666666;
            margin-right: 37px;
          }

          span {
            color: #FF6600;
            margin: 0 5px;
          }
        }

        .total {
          font-size: 14px;
          color: #FF6600;

          span {
            font-size: 24px;
          }

          a {
            width: 202px;
            height: 50px;
            line-height: 50px;
            font-size: 18px;
            margin-left: 37px;
          }
        }
      }
    }
  }
</style>